<template>
  <div class="main-container">
    <header>
      <NavBarCompany/>
      <h1>前途无忧 - 人才招聘平台</h1>
    </header>

    <div class="jobs-container">
      <div v-for="(job, index) in jobPositions" :key="index" class="job-block" @click="goToEditJob(index)">
        <h2>{{ job.title }}</h2>
        <h3>{{ job.jobCategory }}</h3>
        <p><strong>公司:</strong> {{ job.company }}</p>
        <p><strong>地点:</strong> {{ job.location }}</p>
        <p><strong>薪资:</strong> {{ job.salary }}</p>
        <p><strong>描述:</strong> {{ job.description }}</p>
        <p><strong>联系人:</strong> {{ job.contactPerson }}</p>
        <p><strong>联系电话:</strong> {{ job.contactPhone }}</p>
      </div>
    </div>

    <div class="button-container">
      <div @click="goToAddJob" class="clickable-box">
        +
      </div>
    </div>
  </div>
</template>

<script>
import NavBarCompany from "@/components/NavBarCompany.vue";

export default {
  components: {NavBarCompany},
  data() {
    return {
      jobPositions: [
        {
          title: '前端工程师',
          jobCategory: '互联网',
          company: '前途科技',
          location: '北京',
          salary: '15,000 - 20,000元/月',
          description: '负责系统设计与开发，参与产品规划。',
          contactPerson: '张三',
          contactPhone: '123456',
        },
      ]
    };
  },
  methods: {
    goToAddJob() {
      // Replace '/add-job' with the actual route to the job addition page
      this.$router.push('/add-job');
    },
    goToEditJob(index) {
      this.$router.push({path: `/edit-job/${index}`, query: {...this.jobPositions[index]}});
    }
  }
};
</script>

<style>
.main-container {
  text-align: center;
  padding: 20px;
}

.jobs-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.job-block {
  background-color: white;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  width: 300px; /* 确保宽度一致 */
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.job-block:hover {
  background-color: #eee; /* 鼠标悬停时背景色变化 */
}


.job-block h2 {
  margin-top: 0;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.clickable-box {
  width: 70px;
  height: 70px;
  font-size: 60px;
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  line-height: 70px; /* 确保加号居中 */
  transition: background-color 0.3s;
}

.clickable-box:hover {
  background-color: #e2e6ea;
}

.clickable-box:active {
  background-color: #d6d9db;
}
</style>
